<template>
  <el-dialog
    v-model="store.dialogTableVisible"
    title="设置"
    center
    style="border-radius: 12px"
    width="min(600px, 90%)"
    :append-to-body="true"
  >
    <el-tabs :tab-position="width > 768 ? 'left' : 'top'" class="demo-tabs">
      <el-tab-pane label="常规设置">
        <SettingOfCommon />
      </el-tab-pane>
      <el-tab-pane label="壁纸偏好">
        <SettingOfWallpapers />
      </el-tab-pane>
      <el-tab-pane label="功能反馈">
        <h2>功能反馈</h2>
        <p>若有建议、技术上的交流以及Bug反馈，欢迎加入群聊，一起共建起始页！</p>
        <div class="group">
          <img src="/images/group/group.jpeg" alt="">
        </div>
      </el-tab-pane>
      <el-tab-pane label="捐助我们">
        <h2>捐助我们</h2>
        <p>如果体验不错，可以给我们提供捐助，捐助将用于支付服务器的花费。</p>
        <p style="text-align: right;margin-top: .75rem">^_^ 熊猫起始页团队</p>
        <div class="payment">
          <img src="/images/payment/alipay.jpeg" alt="">
          <img src="/images/payment/wechat.jpeg" alt="">
        </div>
      </el-tab-pane>
      <el-tab-pane label="更新历史">
        <h2>更新历史</h2>
        <p style="margin-top: .5rem">2023-05-10</p>
        <p>
          <el-tag type="success">更新</el-tag>
          音乐播放器
        </p>
        <p style="margin-top: .5rem">2023-05-09</p>
        <p>
          <el-tag type="success">更新</el-tag>
          实时在线聊天功能
        </p>
        <p style="margin-top: .5rem">2023-03-05</p>
        <p>
          <el-tag type="success">更新</el-tag>
          修改未登录时添加网址提示失败的问题，进行友好提示；增加回车键提交表单的功能；修复项目上线时间显示为负数的问题
        </p>
        <p style="margin-top: .5rem">2023-03-01</p>
        <p>
          <el-tag type="success">上线</el-tag>
          熊猫起始页 <strong style="text-decoration: underline">v1.0.0 版本</strong> 正式发布
        </p>
        <p>2023-01-29</p>
        <p>
          <el-tag type="warning">测试</el-tag>
          域名备案通过，网站上传服务器，进入内部测试阶段（未上线）
        </p>
      </el-tab-pane>
      <el-tab-pane label="关于">
        <h2 style="color: black">
          熊猫起始页
          <el-tag effect="dark">开源</el-tag>
          <el-tag effect="dark" style="margin-left: .35rem" type="success">免费</el-tag>
          <el-tag effect="dark" style="margin-left: .35rem" type="warning">无广告</el-tag>
        </h2>
        <p style="margin-top: .5rem">这是一个简约而不简单的浏览器起始页，作为互联网的入口。</p>
        <p style="margin-top: .5rem">作为热爱技术的开发者，我们利用课余时间开发了一个基于 Vue 和 Spring Boot 的网站，希望通过项目实践来提升自己的开发能力。</p>
        <p style="margin-top: .5rem">我们仍有许多技术与经验上的不足，接受友好的批评和意见，欢迎大家点击「功能反馈」，扫码加入共建者群，一起尽情讨论吧！</p>
        <p style="margin-top: .5rem">项目正式上线只是一个从"0"到"1"的过程，我们会持续不断地打磨产品，让"1"努力向"100"迈进。</p>
        <p style="margin-top: 1.5rem;text-align: right">项目已上线：第 {{getRunTime()}} 天</p>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script setup>
import {getRunTime} from '@/toolsjs/runtime'
import SettingOfCommon from "@/views/home/childComponents/SettingOfCommon.vue";
import SettingOfWallpapers from "@/views/home/childComponents/SettingOfWallpapers.vue";
import { useHomeStore } from "@/stores/home";
import { useMenuStore } from "@/stores/menu";
import { useWindowSize } from '@vueuse/core';

const {width} = useWindowSize()

const store = useHomeStore();
const useStore = useMenuStore();
</script>

<style lang="less" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
/deep/ .el-tabs__item.is-active {
  color: #000 !important;
  font-weight: 600;
}
/deep/ .el-tabs__item:hover {
  color: #000 !important;
}
/deep/ .el-tabs__active-bar {
  background-color: #000 !important;
}
.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

.group {
  margin: 1rem 0 0;
  display: flex;
  justify-content: space-evenly;

  img {
    border-radius: 8px;
    height: 264px;
    padding-top: .75rem;
    border: 1px solid rgba(0, 0, 0, .1);
  }
}

.payment {
  margin: 1rem 0 .5rem;
  display: flex;
  justify-content: space-evenly;

  img {
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .25);
    height: 264px;
  }
}
</style>